<!-- 交易分析 -->
<template lang="html">
  <div class="dealBox">
    <el-row class="topBox">
      <el-tabs v-model="activeName2" @tab-click="get" type="card" >
        <el-tab-pane label="产品" name="one"></el-tab-pane>
        <el-tab-pane label="流水" name="two"></el-tab-pane>
        <el-tab-pane label="核销" name="three"></el-tab-pane>
        <el-tab-pane label="退款" name="four"></el-tab-pane>
      </el-tabs>
      <router-view></router-view>
    </el-row>
  </div>
</template>

<script>
import back from "./dealBack.vue"
import product from "./dealProduct.vue"
import woter from "./dealWoter.vue"
import verify from "./verify.vue"

export default {
  data (){
    return {
      activeName2:'one'
    }
  },
  methods:{
    get:function (){
      var that = this;
      switch (that.activeName2) {
        case 'one':
          that.$router.push({path:'/statistical/deal/product'});
          break;
        case 'two':
          that.$router.push({path:'/statistical/deal/woter'});
          break;
        case 'three':
          that.$router.push({path:'/statistical/deal/verify'});
          break;
        case 'four':
          that.$router.push({path:'/statistical/deal/back'});
          break;
        default:
      }
    }
  },
  components:{
    'v-back':back,
    'v-product':product,
    'v-woter':woter,
    'v-verify':verify
  },
  created(){
    var that = this;
    switch (that.$route.path) {
      case '/statistical/deal/product':
        that.activeName2='one'
        break;
      case '/statistical/deal/woter':
        that.activeName2='two';
        break;
      case '/statistical/deal/verify':
        that.activeName2='three'
        break;
      case '/statistical/deal/back':
        that.activeName2='four';
        break;
      default:
    }
  }
}
</script>

<style lang="Sass">
.dealBox{
  .el-tabs__item{background: #E7E9F0; border-radius: 6px 6px 0 0; margin-left: 5px;}
  .el-tabs__item:first-child{margin-left: 0;}
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{background: #fff; border: none;}
  .el-tabs--card>.el-tabs__header .el-tabs__item{border: none;}
  .el-tabs__header{margin: 0; border-bottom: none;}
}
</style>
<style lang="Sass" scoped>
.dealBox{ background: #F7F8FC; padding: 10px;
  .topBox{ border-radius: 10px;}
}
</style>
